<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片位置</title>

        <style>
            /* background-position属性可以设置背景图片出现在盒子的什么位置
                  background-position: 100px 200px;
               也可以用top、bottom、center、left、right描述图片出现的位置
               position:absolu 绝对定位
            */

            .box1 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                background-repeat: no-repeat;
                background-size: 50% auto;
                /* 背景位置 此处表示背景图片将出现在距离盒子左边框100px 上边框150px的位置 */
                background-position: 100px 150px;
                margin-bottom: 10px;
            }

            .box2 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                background-repeat: no-repeat;
                background-size: 50% auto;
                /* 背景位置 此处表示背景图片将出现在盒子的正中间的位置 */
                background-position: center center;
                margin-bottom: 10px;
            }

            .box3 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                background-repeat: no-repeat;
                background-size: 50% auto;
                /* 背景位置 此处表示背景图片将出现在盒子下部中间的位置 两个元素可以对换位置 不会有影响 */
                background-position: bottom center;
                margin-bottom: 10px;
            }

            .box4 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                background-repeat: no-repeat;
                background-size: 50% auto;
                /* 背景位置 此处表示背景图片将出现在盒子的右上角 */
                background-position: right top;
                margin-bottom: 10px;
            }

            /* 可以与调整背景图片大小的contain和cover结合使用 */
            .box5 {
                width: 400px;
                height: 300px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                /* 背景位置 此处表示cover将调整背景图片的正中间撑满整个盒子 */
                background-position:center center;
                margin-bottom: 10px;
            }

            .box6 {
                width: 1500px;
                height: 600px;
                border: 1px solid #000;
                background-image: url(sg.jpg);
                background-repeat: no-repeat;
                background-size: cantain;
                /* 背景位置 此处表示使经过cantain调整大小的背景图片容纳在盒子的正中间 */
                background-position:center center;
                margin-bottom: 10px;
            }

        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </body>
</html>